<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-29 16:56:47
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-04-01 16:27:39
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\MixedCutPreview\components\saveVideoDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
   音色选择
-->
<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, onMounted, reactive, ref, nextTick, watch } from "vue";
import request from "@/common/utils/request";

// icon
import {
  CaretRightOutlined,
  PauseOutlined,
  RedoOutlined,
} from "@ant-design/icons-vue";
import { message, Empty } from "ant-design-vue";
import storeAi from "@/store/index";

// 仓库
import { useStore } from "vuex";
// 素材库
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
const store = useStore();

const emit = defineEmits(["resetDataChange"]);

const props = defineProps({
    isTextarea: {
        type: Boolean,
        default:true
  },
  // 是否作为 非混剪使用
  notMixedCutCreat: {
    type: Boolean,
    default: false
  }
});

// 需要隐藏配置的activeKey: 推荐和声音克隆
const hiddenKeys = ['customized_vol', 'recommend']

// 默认音频配置
const voice_config = computed(() => {
  return store.state.videoMixCut.voice_config;
});

// 推荐的默认音频配置
const volcengine_config = computed(() => {
  return store.state.videoMixCut.volcengine_config;
});

// 仓库中的 本项抽屉数据
const currentIndex = computed(() => store.state.videoMixCut.currentIndex);
const subTitle = computed(() => {
  return store.state.videoMixCut.Subtitles[currentIndex.value.index]
    .tts_config[0];
});

// 仓库提交
const setStore = (data) => {
  store.commit("videoMixCut/MODIFY_SUBTITLES_TTSCONFIG", data);
};

// 收集数据
let state = reactive({
  speed: null, // 语速
  volume: null, // 音量
  tone_id: null, // 选择的声音id
  emotion_category: null, // 预期情感类型
  emotion_intensity: null, //情感程度
  img: null,
  name: null,
  // 声音类型为 2 则是火山的音色
  voice_type: null,
  // 推荐音色的语速
  recommendSpeed: null,
  // 音色id
  id: null,
  // 声音分组
  category: null
});
// let state = reactive({
//   speed: 0, // 语速
//   volume: 6, // 音量
//   tone_id: null, // 选择的声音id
//   emotion_category: "neutral", // 预期情感类型
//   emotion_intensity: 50, //情感程度
//   img: "https://local.kuaijingai.com/public_web/static/images/workAi/voice/icon-women.png",
//   name: "智聆",
// });

// 预期列表
const toneList = ref([]);
// 场景和音色列表
const voiceData = reactive({
  category: [],
  list: [],
});

onMounted(() => {
  getVoiceData();
  storeAi.dispatch("getAiConfig").then((aiConfig) => {
    appName.value = aiConfig.site_name
  })
});

// 找到默认的音色分组
const findDeflut = (arr) => {
  let find
  // 优先找推荐, 找不到的话 找通用, 找不到的话 找第一个
  arr.forEach(ele => {
    if (!find) {
      if (ele.key == 'recommend') {
        find = ele
      } else if (!find && ele.key == 'common') {
        find = ele
      }
    }
  })
  return find || arr[0]
};

// 获取场景数据
const getVoiceData = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/voice/category");
  voiceData.category = res.result;
  const find = findDeflut(res.result)
  activeKey.value = find.key;
  console.log(res, "场景列表");
  getVoiceList();
};

// 获取音色列表
const getVoiceList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/voice/list", {
    category: activeKey.value,
  });
  if (res.result.length > 0) {
    voiceData.list = []

    // return
    voiceData.list = res.result;
    toneList.value = voiceData.list[0].item[0].emotion_style;
    console.log(voiceData.list, "音色列表");
    toneList.value.length == 1 &&
      (state.emotion_category = toneList.value[0].key);
  } else {
    voiceData.list = []
  }
};

// 音频播放器
const audioRef = ref(null);
const voiceUrl = ref(null);
// 播放声音
const playFlage = ref(true); // false , 显示试听
const playitem = ref(null); // 存放当期那预览声音的id
const loding = ref(false);
const playVoice = (item) => {
  // playFlage.value = !playFlage.value
  // 相同 , 并且正在播放, 暂停
  if (playitem.value == item.id) {
    playFlage.value ? audioRef.value.pause() : audioRef.value.play();
    // playFlage.value = false
    playFlage.value = !playFlage.value;
  } else {
    // 不同或首次播放
    playitem.value = item.id;
    playFlage.value = true;
    loding.value = true;
    voiceUrl.value = item.voice_url;
    console.log(voiceUrl.value);
    nextTick(() => {
      audioRef.value.play();
      loding.value = false;
    });
  }
};

// 判断是否显示正在播放状态
const playState = (id) => {
  if (playitem.value !== id) return false;
  if (playFlage.value) {
    return true;
  } else {
    return false;
  }
};

// 播放结束
const handleAudioEnded = () => {
  playFlage.value = false;
  audioRef.value.currentTime = 0;
};

// 全局音色试听
const globalAudio = ref(null);
const globalPlay = ref(false); // false - 暂停 显示播放
const globalAudioUrl = ref("");
const handleGlobalAudioEnded = () => {
  globalAudio.value.currentTime = 0;
  globalPlay.value = false;
  console.log("调用了", globalPlay.value);
};

/**
 * 文案试听
 */

// 当前选择的项
const selectVoice = computed(() => {
  return (
    voiceData.list
      .flatMap((ele) => ele.item)
      .find((i) => i.timbre_id == state.tone_id) || null
  );
});
const appName =ref('');

const audition = ref(
  `欢迎使用${appName.value}视频文字转语音工具`
);

//  按钮是否加载中
const btnLoding = ref(false);
const paramsData = computed(() => {
  return {
    text: audition.value,
    speed: state.voice_type == 2 ? state.recommendSpeed : state.speed,
    timbre_id: selectVoice.value?.timbre_id || null,
    volume: state.volume,
    emotion_category: state.emotion_category,
    emotion_intensity: state.emotion_intensity,
    id: state.id,
    category: state.category
  };
});
const isChange = ref(false);
watch(
  () => paramsData.value,
  (nv, ov) => {
    isChange.value = true;
  },
  {
    deep: true,
  }
);

let timerId = ref(null)

// 点击播放按钮
const auditionPlay = () => {
  if (!audition.value.trim()) return message.warn("请输入文案");
  if (!selectVoice.value) return message.warn("请选择想要试听的音色");
  if (!isChange.value && globalAudioUrl.value && globalPlay.value) {
    // 数据无变化, 有url 播放中 => 暂停
    globalAudio.value.pause();
    globalPlay.value = false;
    return;
  } else if (!isChange.value && globalAudioUrl.value && !globalPlay.value) {
    // 数据无变化 , 有url 暂停中 => 播放
    globalAudio.value.play();
    globalPlay.value = true;
    return;
  }
  btnLoding.value = true;
  request
    .get("/work_ai", "/user/shotstack/textToVoice", {
      ...paramsData.value,
      tryListen: 1
    })
    .then((res) => {
      timerId.value = setInterval(() => {
        request
          .get("/work_ai", "/user/shotstack/getVoice", {
            task_id: res.result.task_id,
            request_id: res.result.request_id || "",

          })
          .then((task) => {
            if (task.result.Data.ResultUrl) {
              console.log(task, "获取的音频");
              clearInterval(timerId.value);
              voiceUrl.value = task.result.Data.ResultUrl;
              btnLoding.value = false;
              globalAudioUrl.value = task.result.Data.ResultUrl;
              isChange.value = false;
              nextTick(() => {
                globalAudio.value && globalAudio.value.play();
                globalPlay.value = true;
              });
            }
          });
      }, 1000);
    });
};

// 判断右侧音量重置按钮 是否展示
const resetShow = computed(() => {
  return state.emotion_intensity == 1 && state.speed == 1 && state.volume == 1;
});

// 用于数据重置
let resetData = ref({});
const resetState = () => {
  state = Object.assign(state, resetData.value);
};

const tabsChange = (activeKey) => {
  getVoiceList();
};

const dialog = ref(null);
const voiceDataItem = ref(null)
// 选择某项卡片
const selectCart = (item) => {
  state.tone_id = item.timbre_id;
  state.name = item.name;
  state.img = item.img;
  state.category = item.category;
  state.id = item.id;
  state.voice_type = item.voice_type
  // 作为组件收集的数据
  voiceDataItem.value = item
  voiceDataItem.value.tone_id = item.timbre_id
};
const showModal = () => {

  // 作为组件使用
  if (props.notMixedCutCreat) {
    // 如果为空 则使用默认值进行初始赋值
    if (!state.tone_id || !state.name || !state.img || !state.category || !state.id) {
      // 默认的音色数据
      const defaultVoiceData = store.state.videoMixCut.defaultVoiceData
      // 默认的音色配置
      const voice_config = store.state.videoMixCut.voice_config
      // console.log(defaultVoiceData, '音色数据');
      // console.log(voice_config, '音色配置');
      // 音色弹窗需要的默认数据
      const data = {
        emotion_intensity: voice_config.intensity.default, //情感程度
        speed: voice_config.speed.default, // 语速
        volume: voice_config.volume.default, // 音量
        emotion_category: 'neutral', // 预期情感类型
        tone_id: defaultVoiceData.voice_id, // 选择的声音id
        img: defaultVoiceData.img, // 展示图片地址
        name: defaultVoiceData.name, // 音色名称
        id: defaultVoiceData.id,
        category: defaultVoiceData.category,
        voice_type: defaultVoiceData?.voice_type,
        recommendSpeed: volcengine_config.value.speed.default,
      }
      Object.assign(state, data)
      Object.assign(resetData.value, data)
      console.log(state, '赋值之后的state');

    }
  } else {
    resetData.value = Object.assign(resetData.value, {
      speed: subTitle.value.speed, // 语速
      volume: subTitle.value.volume, // 音量
      tone_id: subTitle.value.tone_id, // 选择的声音id
      emotion_category: subTitle.value.emotion_category, // 预期情感类型
      emotion_intensity: subTitle.value.emotion_intensity, //情感程度
      img: subTitle.value.img, // 展示图片地址
      name: subTitle.value.name, // 音色名称
      id: subTitle.value.id,
      category: subTitle.value.category,
      voice_type: subTitle.value?.voice_type,
      recommendSpeed: subTitle.value.recommendSpeed
    });
    Object.assign(state, {
      speed: subTitle.value.speed, // 语速
      volume: subTitle.value.volume, // 音量
      tone_id: subTitle.value.tone_id, // 选择的声音id
      emotion_category: subTitle.value.emotion_category, // 预期情感类型
      emotion_intensity: subTitle.value.emotion_intensity, //情感程度
      img: subTitle.value.img, // 展示图片地址
      name: subTitle.value.name, // 音色名称
      id: subTitle.value.id,
      category: subTitle.value.category,
      voice_type: subTitle.value?.voice_type,
      recommendSpeed: subTitle.value.recommendSpeed

    });
  }
  dialog.value.showModal();
};
const closeModal = () => {
  dialog.value.closeModal();
};

// 保存
const upgradePackage = () => {
  // setStore(subTitle.value)
  // 判断音色是否修改
  setStore(state);
  closeModal();
  // 通知父组件, 传递选择的音色和配置
  const data = {
    voiceDataItem: voiceDataItem.value, config: {
      volume: state.volume,
      speed: state.speed,
      emotion_category: state.emotion_category,
      emotion_intensity: state.emotion_intensity,
    }
  }

  // store.commit("videoMixCut/SET_VOLUME_DEFAULT", data.config.volume);
  // store.commit("videoMixCut/SET_VOLUME_DEFAULT_SPEED", data.config.speed);
  // store.commit("videoMixCut/SET_VOLUME_DEFAULT_INTENSITY", data.config.emotion_intensity);

  // 作为 除了混剪以外的组件使用
  if (props.notMixedCutCreat) {

    // if (!data.voiceDataItem) return

    emit('resetDataChange', {
      voiceDataItem: voiceDataItem.value || {}, config: {
        ...state
        // volume: state.volume,
        // speed: state.speed,
        // emotion_category: state.emotion_category,
        // emotion_intensity: state.emotion_intensity,
      }
    })
  }
};
// 取消
const cancel = () => {
  closeModal();
};

// 当前tabs 选择的项 common
const activeKey = ref("");


watch(
  () => store.state.videoMixCut.voice_config,
  (val) => {
    if (val) {      
      state.volume = val.volume?.default
      state.speed  = val.speed?.default
      state.emotion_intensity  = val.intensity?.default
    }
  },
  {
    immediate: true,
    deep: true
  }
);

watch(
  () =>  state.volume,
  (val) => {
    if (store.state.videoMixCut.voice_config.volume?.default !== val) {
      store.commit("videoMixCut/SET_VOLUME_DEFAULT", val);
    }
  }
);
watch(
  () =>  state.speed,
  (val) => {
    if (store.state.videoMixCut.voice_config.speed?.default !== val ) {
      store.commit("videoMixCut/SET_VOLUME_DEFAULT_SPEED", val);
    }
  }
);
watch(
  () =>  state.emotion_intensity,
  (val) => {
    if (store.state.videoMixCut.voice_config.intensity?.default !== val ) {
      store.commit("videoMixCut/SET_VOLUME_DEFAULT_INTENSITY", val);
    }
  }
);
defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div class="AudioSelection">
    <baseModel ref="dialog" :contentWidth="'1254px'" minWidth="1254px" :zIndex="1001"
      :getContainer="() => document.queryselector('.AudioSelection')">
      <!-- minWidth='1140px' -->

      <template #title>
        <div class="title_box">
          <span>声音</span>
        </div>
      </template>
      <template #content>
        <div class="content">
          <div class="tabs">
            <a-tabs v-model:activeKey="activeKey" @change="tabsChange">
              <a-tab-pane v-for="i in voiceData.category" :key="i.key" :tab="i.value">

                <template v-if="!voiceData.list.length">
                  <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
                    <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
                  </div>
                </template>
                <template v-else>
                  <!-- 声音 卡片 -->
                  <div class="voice_cart_content" v-for="(v1, index) in voiceData.list" :key="index">
                    <div class="voice">
                      <span class="voice_cart_title"> {{ v1.gender_title }}</span>
                      <div class="voice_cart_list">
                        <template v-if="voiceData.list[index]?.item?.length">

                          <div v-for="(v2, index2) in voiceData.list[index]?.item" :key="index2" class="voice_cart"
                            :class="{
                              active_voice_cart: v2.timbre_id == state.tone_id && v2.id == state.id,
                            }" @click="selectCart(v2)">
                            <div class="voice_left">
                              <div class="imgBox">
                                <img :src="v2.img" />
                                <div class="play_or_stop" @click.stop="playVoice(v2)">
                                  <PauseOutlined v-if="playState(v2.id)" />
                                  <CaretRightOutlined v-else />
                                </div>
                              </div>
                              <div class="described">
                                <span>{{ v2.name }}</span>
                                <span>{{ v2.human_style }}</span>
                              </div>
                            </div>
                          </div>
                        </template>
                        <template v-else>
                          <div
                            style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
                            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
                          </div>
                        </template>

                      </div>
                    </div>
                  </div>
                </template>

              </a-tab-pane>

            </a-tabs>
          </div>
          <!-- 声音配置 -->
          <div class="voice_config" v-if="!hiddenKeys.includes(activeKey)">
            <!-- 重置按钮 -->
            <span :style="{ opacity: resetShow ? 0 : 1 }" class="reset_btn" @click="resetState">
              <RedoOutlined />
            </span>

            <div class="config_cart">
              <span>音量 {{ state.volume }}</span>
              <div class="slider_box">
                <span style="margin-right: 8px">{{
                  voice_config.volume.min
                  }}</span>
                <a-slider class="slider" :min="voice_config.volume.min" :max="voice_config.volume.max" id="test"
                  :step="voice_config.volume.separate" v-model:value="state.volume" />
                <span style="margin-left: 8px">{{
                  voice_config.volume.max
                  }}</span>
              </div>
            </div>
            <div class="config_cart">
              <span>语速 {{ state.speed }}</span>
              <div class="slider_box">
                <span style="margin-right: 8px">{{
                  voice_config.speed.min
                  }}</span>
                <a-slider class="slider" id="test" :min="voice_config.speed.min" :max="voice_config.speed.max"
                  :step="voice_config.speed.separate" v-model:value="state.speed" />
                <span style="margin-left: 8px">{{
                  voice_config.speed.max
                  }}</span>
              </div>
            </div>
            <div class="config_cart">
              <span>情感 {{ state.emotion_intensity }}</span>
              <div class="slider_box">
                <span style="margin-right: 8px">{{
                  voice_config.intensity.min
                  }}</span>
                <a-slider class="slider" id="test" :min="voice_config.intensity.min" :max="voice_config.intensity.max"
                  :step="voice_config.intensity.separate" v-model:value="state.emotion_intensity" />
                <span style="margin-left: 8px">{{
                  voice_config.intensity.max
                  }}</span>
              </div>
            </div>
            <div class="config_cart">
              <span style="margin-right: 10px">语气 </span>
              <a-select :disabled="toneList.length == 1" size="small" style="width: 160px; margin-right: 30px"
                :getPopupContainer="(triggerNode) => {
                  return triggerNode.closest('.voice_config');
                }
                  " ref="select" v-model:value="state.emotion_category">
                <a-select-option v-for="item in toneList" :value="item.key" :key="item.key">
                  {{ item.value }}
                </a-select-option>
              </a-select>
            </div>
            <!-- 文案试听 -->
            <div class="audition_box">
              <a-textarea :bordered="false" v-model:value="audition" :autoSize="{ minRows: 3, maxRows: 5 }"
                :maxlength="40" placeholder="请输入文案，选择一个音色,点击播放开始试听">
              </a-textarea>

              <div class="audition_btn">
                <div>
                  <a-button :loading="btnLoding" @click="auditionPlay" type="primary"
                    style="height: 28px; font-size: 13px">
                    {{ globalPlay ? "暂停" : "试听" }}
                  </a-button>

                </div>
                <span class="show_count">{{ audition.length }} / 40</span>
              </div>
            </div>
          </div>
          <template v-else>
            <template v-if="activeKey == 'recommend'">
              <div class="voice_config">
                <div class="config_cart">
                  <span>推荐语速 {{ state.recommendSpeed }}</span>
                  <div class="slider_box">
                    <span style="margin-right: 8px">{{
                      volcengine_config.speed.min
                    }}</span>
                    <a-slider class="slider" id="test" :min="volcengine_config.speed.min"
                      :max="volcengine_config.speed.max" :step="volcengine_config.speed.separate"
                      v-model:value="state.recommendSpeed" />
                    <span style="margin-left: 8px">{{
                      volcengine_config.speed.max
                    }}</span>
                  </div>
                </div>
                <!-- 文案试听 -->
                <div class="audition_box">
                  <a-textarea :bordered="false" v-model:value="audition" :autoSize="{ minRows: 3, maxRows: 5 }"
                    :maxlength="40" placeholder="请输入文案，选择一个音色,点击播放开始试听">
                  </a-textarea>

                  <div class="audition_btn">
                    <div>
                      <a-button :loading="btnLoding" @click="auditionPlay" type="primary"
                        style="height: 28px; font-size: 13px">
                        {{ globalPlay ? "暂停" : "试听" }}
                      </a-button>
                    </div>

                    <span class="show_count">{{ audition.length }} / 40</span>
                  </div>
                </div>
              </div>


            </template>

            <template v-else>
              <div
                style="padding-top: 50px; width: 279px; height: 100%; display: flex; justify-content: center; align-items: center;">
                <span style="color: #666;">当前分类不支持自定义配置</span>
              </div>
            </template>
          </template>
        </div>
      </template>
      <template #footer>
        <div class="bottom">
          <a-button class="btn" key="back" @click="cancel" style="margin-right: 10px">取消</a-button>
          <a-button class="btn" key="submit" type="primary" :loading="loading" :disabled="disableSubmit"
            @click="upgradePackage">保存</a-button>
        </div>
      </template>
    </baseModel>

    <!-- 每个音频的试听audio节点 -->
    <audio @ended="handleAudioEnded" ref="audioRef" :src="voiceUrl" style="display: none"></audio>
    <!-- 预览自定义音色的音频节点 -->
    <audio @ended="handleGlobalAudioEnded" ref="globalAudio" :src="globalAudioUrl" style="display: none"></audio>
  </div>

</template>

<style lang="less" scoped>
.AudioSelection {
  // height: 100%;
}

:deep(.ss-tabs-content-holder) {
  height: 580px;
  overflow-y: auto;
  border-right: 1px solid #dddddd;

  &:hover {
    &::-webkit-scrollbar {
      display: block;
    }

  }

  &::-webkit-scrollbar {
    width: 6px;
    /* 滚动条的宽度 */
    height: 10px;
    /* 滚动条的高度，垂直滚动条可能用得上 */
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    /* 滑块的背景颜色 */
    border-radius: 10px;
    /* 滑块的圆角 */
  }
}


.title_box {
  span {
    font-size: 18px;
    color: #0c0d0e;
  }
}

.content {
  display: flex;
  border-bottom: 1px solid #dddddd;

  .tabs {
    flex: 1;

    .voice_cart_content {

      .voice {
        display: flex;
        flex-direction: column;

        .voice_cart_title {
          margin-bottom: 10px;
          font-size: 15px;
          font-weight: 600;
        }

        .voice_cart_list {
          display: flex;
          flex-wrap: wrap;

          .voice_cart {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px;
            width: 200px;
            min-height: 80px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            cursor: pointer;
            margin-bottom: 15px;
            margin-right: 25px;

            &:hover {
              background-color: #f9f9f9;

              .play_or_stop {
                opacity: 1 !important;
              }
            }

            .voice_left {
              display: flex;
              align-items: center;

              .described {
                display: flex;
                flex-direction: column;
              }

              .imgBox {
                position: relative;
                border-radius: 30px;
                overflow: hidden;
                margin-right: 20px;

                img {
                  width: 32px;
                }

                .play_or_stop {
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: 1;
                  height: 100%;
                  width: 100%;
                  background-color: #b6b6b685;
                  text-align: center;
                  line-height: 32px;
                  font-size: 18px;
                  opacity: 0;
                  transition: opacity 0.3s;
                }
              }
            }
          }

          .active_voice_cart {
            border-color: #1664ff !important;
            background-color: #e8f4ff !important;
          }
        }
      }
    }
  }

  // 音色配置
  .voice_config {
    width: 650px;
    margin-top: 45px;
    border-top: 1px solid #f0f0f0;
    padding: 0 20px 0 41px;
    // padding: 0 20px;
    position: relative;

    // 文案试听
    .audition_box {
      border: 1px solid #e5e5e5;
      padding: 10px;
      // padding-bottom: 40px;

      // padding-left: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .audition_btn {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .import_meatiner_btn {
        visibility: hidden;
      }

      &:hover .import_meatiner_btn {
        visibility: visible;
      }
    }

    .reset_btn {
      position: absolute;
      top: 30px;
      right: 34px;
      transition: opacity 0.3s;
      cursor: pointer;
      font-size: 16px;
    }

    .config_cart {
      margin-top: 32px;

      .slider_box {
        display: flex;
        align-items: center;

        span {
          font-size: 12px;
          color: #727477;
        }

        .slider {
          flex: 1;
        }
      }
    }

    .audition_box {
      margin-top: 32px;
    }
  }
}

.bottom {
  // display: flex;
  // justify-content: center;
  // align-items: center;

  // .btn {
  //     border-radius: 4px;
  //     overflow: hidden;
  // }
}
</style>
